<template>
  <!-- 并托 -->
  <view class="content">
    <view class="info-views">
      <view
        class="line-view"
        style="align-items: center">
        <view class="line-text">被合并托盘</view>
        <view class="line-value">
          <uni-easyinput
            v-model="scanList[0].val"
            border
            placeholder="请扫描被合并托盘"
            :placeholderStyle="placeholderStyle"
            :focus="boxFocus"
            @confirm="boxScan(scanList[0].val, 0)"
            @focus="scanList[0].val = ''"></uni-easyinput>
        </view>
      </view>

      <view
        class="line-view"
        style="align-items: center">
        <view class="line-text">目标托盘</view>
        <view class="line-value">
          <uni-easyinput
            v-model="scanList[1].val"
            border
            placeholder="请扫描目标托盘"
            :placeholderStyle="placeholderStyle"
            :focus="boxTargetFocus"
            @confirm="boxScan(scanList[1].val, 1)"
            @focus="scanList[1].val = ''"></uni-easyinput>
          <!-- <view class="addView" @click="$u.throttle(addPallet, 1000)">
						生成
					</view> -->
        </view>
      </view>
    </view>

    <uni-collapse ref="collapse">
      <uni-collapse-item
        v-if="projectInfo.length > 0"
        title="被合并托盘">
        <view class="info-views">
          <view
            class="line-view project-line-view"
            style="padding: 25rpx 0"
            v-for="(item, index) of projectInfo"
            :key="index">
            <view class="project-view">
              <view class="title-view">托盘码</view>
              {{ item.palletCode }}
            </view>

            <view class="project-view">
              <view class="title-view">产品编码</view>
              <view class="title-val">
                {{ item.productCode }}
              </view>
            </view>

            <view class="project-view">
              <view class="title-view">产品名称</view>
              {{ item.productName }}
            </view>

            <view class="project-view">
              <view class="title-view">可用数量</view>
              <view class="title-val">
                {{ item.availableQuality || 0 }}
              </view>
            </view>
          </view>
        </view>
      </uni-collapse-item>

      <uni-collapse-item
        v-if="boxInfo.length > 0"
        title="目标托盘">
        <view class="info-views">
          <view
            class="line-view project-line-view"
            style="padding: 25rpx 0"
            v-for="(item, index) of boxInfo"
            :key="index">
            <view class="project-view">
              <view class="title-view">托盘码</view>
              {{ item.palletCode }}
            </view>

            <view class="project-view">
              <view class="title-view">产品编码</view>
              <view class="title-val">
                {{ item.productCode }}
              </view>
            </view>

            <view class="project-view">
              <view class="title-view">产品名称</view>
              {{ item.productName }}
            </view>

            <view class="project-view">
              <view class="title-view">可用数量</view>
              <view class="title-val">
                {{ item.availableQuality || 0 }}
              </view>
            </view>
          </view>
        </view>
      </uni-collapse-item>

      <uni-collapse-item
        v-if="isAdd"
        title="已生成目标托盘">
        <view class="info-views">
          <view
            class="line-view project-line-view"
            style="padding: 25rpx 0">
            <view class="project-view">
              <view class="title-view">托盘码</view>
              <view class="title-val">
                {{ addPalletCode }}
              </view>
            </view>
          </view>
        </view>
      </uni-collapse-item>
    </uni-collapse>

    <view
      class="submit-button"
      @click="$u.throttle(submit, 1000)">
      提 交
    </view>
  </view>
</template>

<script>
var that;
export default {
  data() {
    return {
      addPalletCode: null,
      isAdd: false,
      boxTargetFocus: false,
      upLoading: false,
      boxFocus: false,
      boxInfo: [], //目标托盘
      projectInfo: [], //项目信息
      scanList: [
        {
          val: null,
        },
        {
          val: null,
        },
        {
          val: null,
        },
      ],
      placeholderStyle: 'font-size:28rpx;color:#999',
      scrollTop: 0,
      serialNumberFocus: false, //工单号焦点
    };
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  onLoad() {
    that = this;
  },
  computed: {},
  methods: {
    // 提交
    submit() {
      if (that.projectInfo.length == 0) {
        this.$u.toast('请扫描被合并托盘');
        return false;
      }

      if (that.boxInfo.length == 0 && !that.isAdd) {
        this.$u.toast('请扫描或生成目标托盘');
        return false;
      }

      uni.showLoading({
        mask: true,
        title: '请稍后...',
      });
      const param = {
        newPalletCode: null,
        barcodeCartonNoSaveRequests: that.projectInfo,
      };
      if (that.isAdd) {
        param.newPalletCode = that.addPalletCode;
      } else {
        param.newPalletCode = that.boxInfo[0].palletCode;
      }
      this.$u.post('/wms/mobile/api/mergePalletCode', param).then((res) => {
        that.formModel = [];
        that.palletCode = null;
        uni.showToast({
          icon: 'none',
          mask: true,
          title: '操作成功',
        });
        setTimeout(function () {
          uni.redirectTo({
            url: 'palletFit',
          });
        }, 1500);
      });
    },

    boxScan(e, i) {
      //i: 0 被合并  1 目标托盘
      if (!e) {
        return;
      }
      uni.showLoading({
        mask: true,
        title: '请求中...',
      });
      that.$u
        .post('/wms/mobile/api/getPalletCodeDetail', {
          palletCode: e,
        })
        .then((res) => {
          if (res.code != 0) {
            this.$u.toast(res.message);
            return;
          }
          if (i == 0) {
            // 被合并
            if (res.data.length == 0) {
              this.$u.toast('该托盘暂无数据');
              that.boxFocus = false;
              setTimeout(function () {
                that.$nextTick(function () {
                  that.boxFocus = true;
                });
              }, 100);
              return false;
            }
            if (that.boxInfo.length > 0) {
              if (res.data[0].palletCode == that.boxInfo[0].palletCode) {
                this.$u.toast('该托盘已扫码');
                that.boxFocus = false;
                setTimeout(function () {
                  that.$nextTick(function () {
                    that.boxFocus = true;
                  });
                }, 100);
                return false;
              }
            } else {
              if (res.data[0].palletCode == that.addPalletCode) {
                this.$u.toast('该托盘已扫码');
                that.boxFocus = false;
                setTimeout(function () {
                  that.$nextTick(function () {
                    that.boxFocus = true;
                  });
                }, 100);
                return false;
              }
            }

            that.projectInfo = res.data;
            that.boxTargetFocus = false;
            setTimeout(function () {
              that.$nextTick(function () {
                that.boxTargetFocus = true;
              });
            }, 100);
          } else {
            // 目标
            if (res.data.length == 0) {
              this.$u.toast('该托盘暂无数据');
              that.boxTargetFocus = false;
              setTimeout(function () {
                that.$nextTick(function () {
                  that.boxTargetFocus = true;
                });
              }, 100);
              return false;
            }
            if (that.projectInfo.length > 0) {
              if (res.data[0].palletCode == that.projectInfo[0].palletCode) {
                this.$u.toast('该托盘已扫码');
                return false;
              }
            }

            that.addPalletCode = null;
            that.isAdd = false;
            that.boxInfo = res.data;
          }
        });
    },

    addPallet() {
      if (that.isAdd) {
        this.$u.toast('已生成目标托盘');
        return false;
      }
      uni.showLoading({
        mask: true,
        title: '请稍后...',
      });
      this.$u.post('/wms/mobile/api/createPalletCode', {}).then((res) => {
        that.scanList[1].val = res.data;
        that.addPalletCode = res.data;
        that.boxInfo = [];
        that.isAdd = true;
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f8f8f8;
}

.content {
  height: 100%;
}

.pop-view {
  height: 700rpx;
  width: 650rpx;
  padding: 15rpx 25rpx;
  display: flex;
  font-size: 35rpx;
  z-index: 9;
  flex-direction: column;

  .pop-btn {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1rpx solid #f8f8f8;

    .pop-button {
      width: 50%;
      background-color: #3067e8;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 75rpx;
      font-size: 35rpx;
    }

    .butLeft {
      background-color: #f8f8f8;
      color: #3471ff;
    }
  }

  .pop-info {
    margin: 35rpx 0 25rpx 0;
    font-size: 38rpx;
    width: 600rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    /* 指定显示的行数 */
  }

  .frames-box {
    width: 299rpx;
    font-size: 30rpx;
    padding-left: 10rpx;
    color: #999;
  }

  .qty-box {
    width: 290rpx;
  }

  view {
    display: flex;
    align-items: center;
  }
}

.info-views {
  background-color: #fff;
  padding: 15rpx 25rpx;
  padding-bottom: 10rpx;
  margin-bottom: 25rpx;
}

.mini-text {
  font-size: 30rpx;
}

.sub-text {
  margin-left: 10rpx;
  color: #3067e8;
  text-decoration: underline;
}

.project-view {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
  font-size: 30rpx;

  view {
    display: flex;
  }
}

.project-line-view {
  flex-direction: column;
  border-bottom: 1rpx solid #e3e3e3;
}

.project-line-view:last-of-type {
  border: none;
}

.title-view {
  width: 150rpx;
  color: #909399;
}

.title-val {
  width: 170rpx;
  color: #303133;
}

.submit-button {
  background-color: #3067e8;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30rpx auto;
  width: 96%;
  border-radius: 15rpx;
  height: 80rpx;
  font-size: 38rpx;
}

.line-view {
  width: 100%;
  font-size: 30rpx;
  display: flex;
  align-items: flex-start;
  padding: 15rpx 0;

  .line-text {
    width: 170rpx;
    font-weight: 700;
    color: #555;
  }

  .line-value {
    width: 550rpx;
    display: flex;
    color: #6a6a6a;
  }
}

.addView {
  font-size: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #3067e8;
  padding-left: 15rpx;
  font-weight: 700;
}

.addView:active {
  color: #8f8f8f;
}
</style>
